<template>
    <div class="detailgoodsinfo">
        <div class="title">
            <i></i>
            <span>{{goodsImage.key}}</span>
            <i></i>
        </div>
        <div class="imageList">
            <span v-for="(item,index) in goodsImage.list" :key="index">
                <img :src="item" alt="" @load="imageload">
            </span>
        </div>
    </div>
</template>
<script>
export default {
    name:"DetailGoodsInfo",
    data() {
        return {
            loadCount:0
        }
    },
    props:{
        goodsImage:{
            type:Object,
            default:{}
        }
    },
    methods:{
        imageload(){
            if(++this.loadCount===this.goodsImage.list.length){
                this.$emit("imageload")
            }       
        }
    }
}
</script>
<style lang="css" scoped>
    .detailgoodsinfo{
        background: white;
        border-bottom:2px solid rgb(226, 226, 226);
    }
    .title{
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .title span{
        margin: 0px 10px;
        vertical-align: middle;
    }
    .title i{
        display: inline-block;
        height: 2px;
        width: 100px;
        vertical-align: middle;
        background: #ff5777;
    }
    .imageList span img{
        width: 100%;
    }
</style>